<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>库存管理</a-breadcrumb-item>
    <a-breadcrumb-item>供货商信息维护</a-breadcrumb-item>
  </a-breadcrumb>

  <a-button
    type="primary"
    @click="openAdd"
    ghost
    style="margin: -30px 20px 10px 10px; font-size: 20px; float: right"
    >新增</a-button
  >
  <a-button
    type="primary"
    @click="showDrawer"
    style="margin: -30px 20px 10px 10px; font-size: 20px; float: right"
  >
    查询
  </a-button>

  <a-drawer
    title="查询供货商信息"
    :width="520"
    :visible="visible"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <a-form :model="query" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="20">
          <a-form-item label="供货商编号">
            <a-input
              v-model:value="query.su_id"
              placeholder="请输入供货商编号"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="20">
          <a-form-item label="供货商名称">
            <a-input
              v-model:value="query.su_name"
              placeholder="请输入供货商名称"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="20">
          <a-form-item label="供货商电话">
            <a-input
              v-model:value="query.su_tel"
              placeholder="请输入供货商电话"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="20">
          <a-form-item label="供货商负责人">
            <a-input
              v-model:value="query.su_person"
              placeholder="请输入供货商负责人"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button type="primary" @click="getPage(1)">查询</a-button>
    </div>
  </a-drawer>

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
    bordered
  >
    <template #opr="{ record }">
      <a-button @click="openUpd(record)" type="primary">修改</a-button>

      <a-divider type="vertical" />

      <a-popconfirm
        title="确定将其加入黑名单？"
        ok-text="确定"
        cancel-text="取消"
        @confirm="execDel(record.su_id)"
      >
        <a-button type="danger">添加至黑名单</a-button>
      </a-popconfirm>
    </template>
  </a-table>

  <supplier-add ref="AddRef" @flash="getPage(page.last + 1)"></supplier-add>
  <supplier-upd ref="UpdRef" @flash="getPage(page.current)"></supplier-upd>
  <supplier-del ref="DelRef" @flash="getPage(page.current)"></supplier-del>
</template>


<script setup>
import { ref, reactive } from "vue";
import { get, put, post, tip, del } from "@/common";
import SupplierAdd from "./SupplierAdd.vue";
import SupplierUpd from "./SupplierUpd.vue";
import SupplierDel from "./SupplierDel.vue";

const AddRef = ref();
const openAdd = () => {
  AddRef.value.openAdd();
};
const UpdRef = ref();
const openUpd = (record) => {
  UpdRef.value.openUpd(record);
};
const DelRef = ref();
const execDel = (id) => {
  DelRef.value.execDel(id);
};

const visible = ref(false);

const showDrawer = () => {
  visible.value = true;
};

const onClose = () => {
  visible.value = false;
};

const columns = [
  {
    dataIndex: "su_id", //服务端数据属性名
    title: "供货商编号",
    align: "center",
  },
  {
    dataIndex: "su_name", //服务端数据属性名
    title: "供货商名称",
    align: "center",
  },
  {
    dataIndex: "su_tel", //服务端数据属性名
    title: "供货商电话",
    align: "center",
  },
  {
    dataIndex: "su_person", //服务端数据属性名
    title: "供货商负责人",
    align: "center",
  },
  {
    dataIndex: "opr",
    title: "操作",
    align: "center",
    slots: {
      customRender: "opr",
    },
  },
];
//分页处理-start
const query = reactive({
  su_id: "",
  su_name: "",
  su_tel: "",
  su_person: "",
}); //定义查询参数

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 2, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/stock/supplier", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

//分页处理-end
</script>
